/**
 * Created by Mohamed Sweelam on 28/09/2014.
 */

angular.module('Parallel-Coordinates', [])
    .controller('Ctrl', function($scope) {

    })
    .directive('pc', function ($parse) {
        return {
            restrict: 'E',
            replace: true,
            template:
                '<div >' +
                '<center>'+
                '<button ng-click = "draw()"> Display Parallel </button>'+
                '</center>'
                    +'</div>',

            link: function (scope, element, attrs) {

                scope.draw = function() {

                    var margin = {top: 30, right: 10, bottom: 10, left: 50},
                        width = 1400 - margin.left - margin.right,
                        height = 500 - margin.top - margin.bottom;

                    var x = d3.scale.ordinal()
                            .rangePoints([0, width], 1),
                        y = {},
                        dragging = {};

                    var line = d3.svg.line(),
                        axis = d3.svg.axis().orient("left"),
                        background,
                        foreground;

                    var svg = d3.select("body")
                            .append("svg")
                            .attr("width", width + margin.left + margin.right)
                            .attr("height", height + margin.top + margin.bottom)
                            .append("g")
                            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

                    Inter_Tech.Resize_height("#nHeight", "#nHeight-value");
                    Inter_Tech.Resize_width("#nWidth", "#nWidth-value");


                    Inter_Tech.updateHeight(svg, 600, "#nHeight-value", "#nHeight");
                    Inter_Tech.updateWidth(svg, 1450, "#nWidth-value", "#nWidth");


                    d3.csv("Mycar.csv", function (error, cars) {

                        // Extract the list of dimensions and create a scale for each.
                        x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {

                            if(d === "colour") return false;

                            if(d === "name") {
                                y[d] = d3.scale.ordinal()
                                    .domain(cars.map(function(p) { return p[d]; }))
                                    .rangePoints([height, 0]);
                            }

                            else {
                                y[d] = d3.scale.linear()
                                    .domain(d3.extent(cars, function(p) { return +p[d]; }))
                                    .range([height, 0]);
                            }
                            return true;
                        }));

                        // Add grey background lines for context.
                        background = svg.append("g")
                            .attr("class", "background")
                            .selectAll("path")
                            .data(cars)
                            .enter()
                            .append("path")
                            .attr("d", path);

                        // Add other foreground lines for focus.
                        foreground = svg.append("g")
                            .attr("class", "foreground")
                            .selectAll("path")
                            .data(cars)
                            .enter()
                            .append("path")
                            .attr("d", path);

                        // Add a group element for each dimension.
                        var g = svg.selectAll(".dimension")
                            .data(dimensions)
                            .enter()
                            .append("g")
                            .attr("class", "dimension")
                            .attr("transform", function (d) {
                                return "translate(" + x(d) + ")";
                            })
                            .call(d3.behavior.drag()
                                .origin(function (d) {
                                    return {x: x(d)};
                                })
                                .on("dragstart", function (d) {
                                    dragging[d] = x(d);
                                    background.attr("visibility", "hidden");
                                })
                                .on("drag", function (d) {
                                    dragging[d] = Math.min(width, Math.max(0, d3.event.x));
                                    foreground.attr("d", path);
                                    dimensions.sort(function (a, b) {
                                        return position(a) - position(b);
                                    });
                                    x.domain(dimensions);
                                    g.attr("transform", function (d) {
                                        return "translate(" + position(d) + ")";
                                    })
                                })
                                .on("dragend", function (d) {
                                    delete dragging[d];
                                    transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")");
                                    transition(foreground).attr("d", path);
                                    background
                                        .attr("d", path)
                                        .transition()
                                        .delay(500)
                                        .duration(0)
                                        .attr("visibility", null);
                                }));

                        // Add an axis and title start from first column in my data.
                        g.append("g")
                            .attr("class", "axis")
                            .each(function (d) {
                                d3.select(this)
                                    .call(axis.scale(y[d]));
                            })
                            .append("text")
                            .style("text-anchor", "middle")
                            .attr("y", -9)
                            .text(function (d) {
                                return d;
                            });

                        // Add and pause a brush for each axis.
                        g.append("g")
                            .attr("class", "brush")
                            .each(function (d) {
                                d3.select(this)
                                    .call(y[d].brush = d3.svg.brush()
                                        .y(y[d])
                                        .on("brushstart", function(){
                                            Inter_Tech.PC_BrushStart();
                                        })
                                        .on("brush", function(){
                                            Inter_Tech.PC_Brush(y, foreground);
                                        }));
                            })
                            .selectAll("rect")
                            .attr("x", -8)
                            .attr("width", 16);
                    });

                    function position(d) {
                        var v = dragging[d];
                        return v == null ? x(d) : v;
                    }

                    function transition(g) {
                        return g.transition().duration(500);
                    }

                    // Returns the path for a given data point.
                    function path(d) {
                        return line(dimensions.map(function (p) {
                            return [position(p), y[p](d[p])];
                        }));
                    }
                }

            }
        };
    });



/**
 * Created by Mohamed Sweelam on 28/09/2014.
 */

